Introduction to Browser Events in JSIn JavaScript, browser events are actions or occurrences that happen in the browser, usually as a result of user interaction or the browser's own behavior. These events allow developers to make web pages interactive, responsive, and dynamic.
Common examples include:
A user clicking a button
A mouse hovering over an element
A keyboard key being pressed
A form being submitted
A page finishing loading
All Types of "on" Functions (Event Handlers)
(a). Mouse Events:
onclick: triggered when the element is clicked.
ondblclick: triggered when the element is double-clicked.
onmousedown: when the mouse button is pressed down.
onmouseup: when the mouse button is released.
onmouseover: when the mouse pointer moves over an element.
onmouseout: when the pointer moves out of an element.
onmousemove: when the pointer is moving over an element.
oncontextmenu: when the right-click context menu is opened.
(b). Keyboard Events:
onkeydown: when a key is pressed down.
onkeypress (deprecated): when a character key is pressed (was used for printable characters).
onkeyup: when a key is released.
(c). Form Events
onsubmit: when a form is submitted.
onreset: when a form is reset.
onchange: when the value of an input, select, or textarea changes.
oninput: when the value of an input changes (more instant than onchange).
onfocus: when an element gains focus.
onblur: when an element loses focus.
(d). Window Events
onload: when the page finishes loading.
onunload: when the page is unloaded.
onresize: when the window is resized.
onscroll: when the window or an element is scrolled.
(e). Clipboard Events
oncopy: when content is copied.
oncut: when content is cut.
onpaste: when content is pasted.
(f). Drag and Drop Events
ondrag: during dragging.
ondragstart: at the start of dragging.
ondragend: when dragging ends.
ondragover: when a dragged item is over a valid drop target.
ondrop: when the item is dropped.
(g). Touch Events (for mobile devices)
ontouchstart: when a touch starts.
ontouchmove: when a finger moves on the screen.
ontouchend: when the finger is lifted.
Example:-
<button id="myBtn">Click me</button>
<script>
document.getElementById('myBtn').onclick = function() {
alert('Button clicked!');
};
</script>